<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //普通函数 √
    //函数表达式 √
    //自执行函数 √
    //事件处理函数 √
    //回调函数 √
    //箭头函数 √
    //构造函数 √


    //JavaScript是单线程的，只有一个主线程，一次只能执行一个任务。
    //同步和异步
    //同步：阻塞模式，后一个任务等到前一个任务执行完成。(顺序执行) - 主线程
    // alert(a);
    // alert('hehe');

    // console.log(1);
    // console.log(2);
    // console.log(3);
    // console.log(4);

    // 异步：非阻塞模式，将任务先放入对列，等待主线程的任务执行完成，执行队列的任务。
    // 定时器是异步的。
    // console.log(1); //同步

    // setTimeout(() => { //异步
    //     console.log(2);
    // }, 20);

    // setTimeout(() => { //异步
    //     console.log(3);
    // }, 0);

    // console.log(4); //同步

    //1.Generators生成器函数 - 解决异步顺序问题
    // Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。
    // Generator 函数是一个状态机，封装了多个内部状态。
    // 但是有两个特征。
    // 一是，function关键字与函数名之间有一个星号；
    // 二是，函数体内部使用yield（产出）表达式，定义不同的内部状态.

    function* fn() {
        yield '第一件事件';
        yield '第二件事件';
        yield '第三件事件';
    }

    let gen = fn(); //gen:Generator 函数返回遍历器对象  
    //就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield表达式后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束
    console.log(gen.next()); //{value: "第一件事件", done: false}
    console.log(gen.next()); //{value: "第二件事件", done: false}
    console.log(gen.next()); //{value: "第三件事件", done: true}
</script>